<script setup lang="ts">
import { useRoute,useRouter } from 'vue-router'
import $api from '@/api'
import { ref, watch } from 'vue'
import Swiper from '@/components/common/Swiper.vue'
import SwiperItem from '@/components/common/SwiperItem.vue'
import ChooseSKU from './components/ChooseSKU.vue'
import ChooseAddress from './components/ChooseAddress.vue'
import useToast from '@/hooks/useToast'
import {showDialog} from '@/hooks/useDialog'
const $route=useRoute(),$router=useRouter()
const showSku=ref(false),showAddress=ref(false)
const detail=ref<any>({}),banners=ref([]),skus=ref([]),sku=ref<any>({}),addresses=ref([]),address=ref<any>({}),hasFavority=ref(false)
let favorityId
if($route.query.id){
  const {data}=$api.goods.getByID($route.query.id)
  watch(data,(_data:any) =>{
    detail.value=_data
    banners.value=_data.goods_banner_imgs??[]
    _data.skus.map(item => item.goods_thumb=_data.goods_thumb)
    skus.value=_data.skus??[]
    sku.value=_data.skus[0]
    sku.value._number=1
    addHistory()
    hasCollect()
  })
}
getAddress()
//获取地址信息
function getAddress(){
  const {data}=$api.address.list()
  watch(data,(_data:any) =>{
    addresses.value=_data
    address.value=_data.find(item => item.is_default)??{}
  })
}
//加入购物车
function addCart(){
  const {data}=$api.cart.add({
    goods_id:detail.value._id,
    sku_id:sku.value._id,
    goods_name:detail.value.name,
    sku_name:sku.value.sku_name,
    price:sku.value.price,
    count:sku.value._number,
    goods_thumb:detail.value.goods_thumb,
    stock:sku.value.stock
  })
  watch(data,(_data:any) =>{
    useToast('添加成功')
    showSku.value=false
    _hmt.push(['addCart','cart','click','sku_id',sku.value._id])
    showDialog({
      content:'添加成功,是否前往购物车?',
      comfirm(){
        gotoCart()
      }
    })
  })
}
//购买
function purchase(){
  const {data}=$api.order.add({
    total_fee:sku.value._number*sku.value.price,
    address_id:address.value.id,
    sku_ids:[sku.value._id],
    goods_ids:[detail.value._id],
    counts:[sku.value._number],
    status:1,
    is_refund:false
  })
  watch(data,(_data:string) =>{
    useToast('创建成功')
    $router.push({
      path:'/orders/pay',
      query:{
        id:_data
      }
    })
  })
}
//添加收藏
function addCollect(){
  const {data}=$api.favorites.add({
    goods_id:detail.value._id,
    sku_id:sku.value._id,
    goods_name:detail.value.name,
    sku_name:sku.value.sku_name,
    goods_thumb:detail.value.goods_banner_imgs[0],
    price:sku.value.price,
  })
  watch(data,(_data) =>{
    hasFavority.value=true
    _hmt.push(['collect','goods','click','sku_id',sku.value._id])
  })
}
//取消收藏
function removeCollect(){
  if(!favorityId) return
  const {data}=$api.favorites.del([favorityId])
  watch(data,(_data) =>{
    hasFavority.value=false
    _hmt.push(['unCollect','goods','click','sku_id',sku.value._id])
  })
}
//跳转购物车
function gotoCart() {
  $router.push('/tabbar/cart')
}
//查询是否收藏
function hasCollect() {
  const {data}=$api.favorites.has({
    goods_id:detail.value._id,
    sku_id:sku.value._id
  })
  watch(data,(_data) =>{
    hasFavority.value=true
    favorityId=_data._id
  })
}
//添加历史记录
function addHistory() {
  $api.record.add({
    goods_id:detail.value._id,
    sku_id:sku.value._id,
    goods_name:detail.value.name,
    sku_name:sku.value.sku_name,
    goods_thumb:detail.value.goods_banner_imgs[0],
    price:sku.value.price
  })
}
</script>

<template>
  <div
    w:bg="blue-gray-100"
  >
    <Swiper>
      <SwiperItem v-for="(item,idx) in banners" :key="idx">
        <img :src="item" />
      </SwiperItem>
    </Swiper>
    <div
      w:flex="~ nowrap"
      w:align="items-stretch"
      w:p="y-4 x-8"
      w:bg="white"
      w:border="rounded-b-4xl"
    >
      <div
        w:text="3xl"
        w:font="bold"
        w:flex="1"
      >{{detail.name}}&nbsp;{{sku.sku_name}}</div>
      <template v-if="$store.getters['user/hasLogin']">
        <div
          w:w="1px"
          w:m="x-3"
          w:h="auto"
          w:bg="gray-400"
        >&nbsp;</div>
        <div class="iconfont icon-collect-off" v-show="!hasFavority" @click="addCollect"
          w:text="5xl"
        ></div>
        <div class="iconfont icon-collect-on" v-show="hasFavority" @click="removeCollect"
          w:text="5xl red-500"
        ></div>
      </template>
    </div>
    <div
      w:bg="white"
      w:border="rounded-4xl"
      w:m="y-6"
      w:p="y-4 x-8"
    >
      <div @click="showSku=true"
        w:flex="~ nowrap"
      >
        <div
          w:font="bold"
        >已选</div>
        <div
          w:flex="1"
          w:m="x-4"
        >{{sku.sku_name}},{{sku._number}}个</div>
        <div class="iconfont icon-arrow-right"></div>
      </div>
      <div @click="showAddress=true"
        w:h="1px"
        w:m="y-4"
        w:bg="gray-200"
      ></div>
      <div @click="showAddress=true"
        w:flex="~ nowrap"
      >
        <div
          w:font="bold"
        >送至</div>
        <div
          w:flex="1"
          w:m="x-4"
        >{{address.formatted_address}}</div>
        <div class="iconfont icon-arrow-right"></div>
      </div>
      <div
        w:h="1px"
        w:m="y-4"
        w:bg="gray-200"
      ></div>
    </div>
    <div
      w:pos="fixed bottom-0 left-0"
      w:w="full"
      w:h="30"
      w:flex="~ nowrap"
      w:align="items-stretch"
      w:justify="end"
      w:p="4"
    >
      <div @click="gotoCart"
        w:flex="~ col nowrap"
        w:align="items-center"
        w:justify="center"
      >
        <div class="iconfont icon-cart"
          w:text="5xl"
        ></div>
        <div>购物车</div>
      </div>
      <div @click="addCart"
        w:flex="~"
        w:align="items-center"
        w:justify="center"
        w:bg="red-600"
        w:text="white"
        w:border="rounded-full"
        w:w="50"
        w:m="l-4 y-2"
      >加入购物车</div>
      <div @click="purchase"
        w:flex="~"
        w:align="items-center"
        w:justify="center"
        w:bg="yellow-600"
        w:text="white"
        w:border="rounded-full"
        w:w="50"
        w:m="l-4 y-2"
      >立即购买</div>
    </div>
    <ChooseSKU v-model:visible="showSku" v-model="sku" :skus="skus" @add-cart="addCart" @purchase="purchase" />
    <ChooseAddress v-model:visible="showAddress" v-model="address" :addresses="addresses" />
  </div>
</template>

<style scoped lang="scss">

</style>

<route>
{
  meta: {
    title: '详情',
    auth: true
  }
}
</route>